import React, {Component} from 'react';
import './Key.css';

class Key extends Component {
  state = {
    pressIndex: -1,
    keyNum: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
  };

  render() {
    let {keyNum} = this.state;
    return (
      <div className='key'>
        <ul className='keyBoard'>
          {keyNum.map((item, index) => <li
            className={this.state.pressIndex === index ? 'active' : ''}
            key={item}
            onClick={() => {

              //传递到父组件 --> 另外一个兄弟组件
              this.props.receiveKey(item);
              //添加一个类
              this.setState({
                pressIndex: index
              });
              //过200ms恢复
              setTimeout(()=>{
                this.setState({
                  pressIndex: -1
                })
              },200)
            }}>
            {item}
          </li>)}
        </ul>
      </div>
    );
  }
}

export default Key;
